<template>
  <el-card shadow="never" class="aui-card--fill"  style="position: relative">
    <div class="mod-demo__setmeal}">
      <el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-input v-model="dataForm.name" placeholder="套餐名称" clearable></el-input>
        </el-form-item>

        <el-form-item  prop="code">
          <el-input v-model="dataForm.code" placeholder="商品码"
                    clearable></el-input>
        </el-form-item>
        <el-form-item prop="sPrice">
          <el-input v-model="dataForm.sPrice" placeholder="价格 ≥"
                    clearable></el-input>
        </el-form-item>
        <el-form-item prop="bPrice">
          <el-input v-model="dataForm.bPrice" placeholder="价格 ≤"
                    clearable></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="beforeDataList()">{{ $t('query') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="exportHandle()">{{ $t('export') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button v-if="$hasPermission('demo:setmeal:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button v-if="$hasPermission('demo:setmeal:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
        </el-form-item>

        <el-form-item>
          <el-button v-if="$hasPermission('demo:setmeal:update')" type="success" @click="updateStatusHandle(null,1)">{{ $t('updateStatusBatch') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button v-if="$hasPermission('demo:setmeal:update')" type="warning" @click="updateStatusHandle(null,0)">{{ $t('updateStatusBatch_stop') }}</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;"
                :default-sort = "{prop: 'price', order: 'descending'}">
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="name" label="套餐名称" header-align="center" align="center"></el-table-column>

        <el-table-column prop="image" label="图片" header-align="center" align="center">
          <template v-slot:default="{row}">
            <el-image style="width: auto;height: 40px; border:none; cursor: pointer;"
                      :src="url+row.image"
                      :preview-src-list="[url+row.image]">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>

        <el-table-column prop="code" label="商品码" header-align="center" align="center"></el-table-column>
        <el-table-column prop="price" label="套餐价格" header-align="center" align="center"  sortable>
          <template v-slot:default="{row}">
            <span>￥{{(row.price/100).toFixed(2)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="categoryName" label="套餐分类" header-align="center" align="center"></el-table-column>
        <el-table-column prop="description" label="描述信息" header-align="center" align="center"></el-table-column>
        <el-table-column prop="status" :label="$t('updateStatus')" header-align="center" align="center">
          <template v-slot:default="{row}">
            <el-tag type="success" v-if="row.status===1">{{$t('updateStatusBatch')}}</el-tag>
            <el-tag type="warning" v-else>{{$t('updateStatusBatch_stop')}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="updateDate" label="更新时间" header-align="center" align="center" sortable></el-table-column>
        <el-table-column prop="updater" label="修改人" header-align="center" align="center"></el-table-column>


       <el-table-column :label="$t('handle')"  header-align="center" align="center" width="150" >
          <template slot-scope="scope">
            <el-button v-if="$hasPermission('demo:setmeal:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
            <el-button v-if="$hasPermission('demo:setmeal:update')" type="text" size="small" @click="updateStatusHandle(scope.row.id,1^scope.row.status)">{{ scope.row.status == '0' ? '启售' : '停售' }}</el-button>
            <el-button v-if="$hasPermission('demo:setmeal:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" class="addAndUpdate"></add-or-update>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './setmeal-add-or-update'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      url:this.$urlConfig.oosUrl,
      mixinViewModuleOptions: {
        getDataListURL: '/demo/setmeal/page',
        getDataListIsPage: true,
        exportURL: '/demo/setmeal/export',
        deleteURL: '/demo/setmeal',
        deleteIsBatch: true,
        updateStatusIsBatch: true,
        updateStatusURL: '/demo/setmeal/updateStatus'
      },
      dataForm: {
        id:'',
        name:'',
        code:'',
        sPrice:'',
        bPrice:'',
        minPrice:'',
        maxPrice:'',
      }
    }
  },
  methods:{
    beforeDataList(){
      this.dataForm.maxPrice=this.dataForm.bPrice*100,
          this.dataForm.minPrice=this.dataForm.sPrice*100
      this.getDataList();
    }
  },
  components: {
    AddOrUpdate
  },
  computed:{
    dataRule () {

      let minRule=(rule,value,callback)=>{
        if(this.dataForm.bPrice){
          this.$refs.dataForm.validateField('bPrice');
        }
        callback();
      };
      let maxRule=(rule,value,callback)=>{
        if(this.dataForm.bPrice){
          if (Number(this.dataForm.sPrice)<=Number(value)){
            callback();
          }else {
            callback(new Error("不能小于最小价格！"))
          }
        }
        callback();
      }
      return{
        sPrice: [
          {  message: '输入必须为正整数或两位小数', trigger: 'blur',pattern:'(([1-9]{1}\\d*)(.\\d{1,2})?)|(0{1}.\\d{1,2})'},
          {validator:minRule,trigger: 'blur'}

        ],
        bPrice: [
          {  message: '输入必须为正整数或两位小数', trigger: 'blur',pattern:'(([1-9]{1}\\d*)(.\\d{1,2})?)|(0{1}.\\d{1,2})'},
          {validator:maxRule,trigger: 'blur'}
        ],

      }
    }

  }
}
</script>
<style>
.addAndUpdate {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 1;
}

</style>